import Vue from "vue";
import Vuex from "vuex"; // npm i vuex@3

/*
  vuex
  
  1. 概念：
    集中式管理多个组件共享的状态数据
  
  2. 组成：

    state: 存储数据的容器（管理数据/状态）

    getters: 存储只读的计算属性数据

    
    修改vuex的数据有两种方式：
      1. 先触发actions，再触发mutations
      2. 直接触发mutations

    actions: 存储用来间接更新数据的函数
      间接更新数据：发送请求的操作（异步操作）

    mutations: 存储用来直接更新数据的函数
      最终vuex数据都是在mutations中完成更新的
*/

// 安装Vuex插件
Vue.use(Vuex);

// 创建store对象
const store = new Vuex.Store({
  // 存储数据的容器
  state: {
    msg: "hello vuex",
    time: 1659493813368,
    count: 0,
  },
  // 存储只读的计算属性数据
  getters: {
    formatTime(state) {
      const time = state.time;
      const date = new Date(time);

      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      // 补0
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;

      return `${y}-${m}-${d}`;
    },
  },
  // 存储用来间接更新数据的函数(一定要做异步操作)
  actions: {
    /*
      action函数接受两个参数：
       1. context (相当于组件中$store对象)
        state
        getters
        dispatch
        commit 一般只使用commit
       2. 触发dispatch传入的参数
    */
    // increment(context) {
    //   setTimeout(() => {}, 1000);
    // },
    increment({ commit }, num) {
      setTimeout(() => {
        // commit只能传递一个参数
        // 触发mutation函数
        commit("INCREMENT", num);
      }, 1000);
    },
  },
  // 存储用来直接更新数据的函数
  mutations: {
    /*
      mutations函数接受两个参数：
        1. state 就是vuex的state数据
        2. 触发commit方法传递的数据
    */
    INCREMENT(state, num) {
      state.count += num;
    },
    DECREMENT(state, num) {
      state.count -= num;
    },
  },
});

// 暴露出去
export default store;
